<template>
  <div>
    <div id="header">
      <div id="place">
        <span> 地区：</span>
        <span :class="{active:area=='全部'}" @click="area='全部'">全部</span>
        <span :class="{active:area=='内地'}" @click="area='内地'">内地</span>
        <span :class="{active:area=='港台'}" @click="area='港台'">港台</span>
        <span :class="{active:area=='欧美'}" @click="area='欧美'">欧美</span>
        <span :class="{active:area=='日本'}" @click="area='日本'">日本</span>
        <span :class="{active:area=='韩国'}" @click="area='韩国'">韩国</span>

      </div>
      <div id="type">
        <span>类型：</span>
        <span :class="{active:type=='全部'}" @click="type='全部'">全部</span>
        <span :class="{active:type=='官方版'}" @click="type='官方版'">官方版</span>
        <span :class="{active:type=='原声'}" @click="type='原声'">原声</span>
        <span :class="{active:type=='现场版'}" @click="type='现场版'">现场版</span>
        <span :class="{active:type=='网易出品'}" @click="type='网易出品'">网易出品</span>

      </div>
      <div id="sort">
        <span :class="{active:order=='排序'}" @click="order='排序'">排序：</span>
        <span :class="{active:order=='上升最快'}" @click="order='上升最快'">上升最快</span>
        <span :class="{active:order=='最热'}" @click="order='最热'">最热</span>
        <span :class="{active:order=='最新'}" @click="order='最新'">最新</span>
      </div>
    </div>

    <ul id="mmv">
      <li v-for="(item,index) in list" :key=index @dblclick="toPlayMV(item.id)">
        <img :src="item.cover" alt="">
        <span class="num">播放量：{{item.playCount}}</span>
        <p class="name">{{item.name}}</p>
        <p class="author">{{item.artistName}}</p>
      </li>
      <el-pagination @current-change="handleCurrentChange" background="#409eff" layout="prev, pager, next"
        :total="total" :current-page="page" :page-size="5" :limit="limit" id="page">
      </el-pagination>
    </ul>

  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        list: [],
        total: 20,
        page: 1,
        limit: 8,
        area: "全部",
        order: "上升最快",
        type: "全部"
      }
    },
    watch: {
      area() {
        this.page = 1
        this.getList()
      },
      type() {
        this.page = 1
        this.getList()
      },
      order() {
        this.page = 1
        this.getList()
      }
    },
    created() {
      this.getList()
    },
    methods: {
      toPlayMV(id) {
        this.$router.push(`/Video?q=${id}`)
      },
      getList() {
        axios({
          url: 'http://music.eleuu.com/mv/all',
          method: 'get',
          params: {
            area: this.area,
            type: this.type,
            order: this.order,
            limit: this.limit,
            offset: (this.page - 1) * this.limit
          }
        }).then(res => {
          this.list = res.data.data

          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].playCount > 100000) {
              this.list[i].playCount = parseInt(this.list[i].playCount / 10000) + '万'
            }
            if (res.data.count) {
              this.total = res.data.count
            }
          }
        })
      },
      handleCurrentChange(val) {
        // console.log(`当前页:${val}`);
        this.page = val
        this.getList()
      }
    }
  }

</script>
<style scoped>
  #header {
    position: fixed;
    left: 110px;
    top: 160px;
    color: rgb(250, 250, 250, 0.8);
    text-align: left;
  }

  #header a {
    text-decoration: none;
    color: rgb(255, 255, 255, 0.7);
  }

  #place span {
    position: absolute;
    left: 0px;
    width: 100px;
  }

  #place :nth-child(2) {
    left: 100px;
  }

  #place :nth-child(3) {
    left: 200px;
  }

  #place :nth-child(4) {
    left: 300px;
  }

  #place :nth-child(5) {
    left: 400px;
  }

  #place :nth-child(6) {
    left: 500px;
  }

  #place :nth-child(7) {
    left: 600px;
  }

  #type span {
    position: absolute;
    left: 0px;
    width: 100px;
    top: 40px;
  }

  #type :nth-child(2) {
    left: 100px;
  }

  #type :nth-child(3) {
    left: 200px;
  }

  #type :nth-child(4) {
    left: 300px;
  }

  #type :nth-child(5) {
    left: 400px;
  }

  #type :nth-child(6) {
    left: 500px;
  }

  #sort span {
    position: absolute;
    left: 0px;
    top: 80px;
    width: 100px;
  }

  #sort :nth-child(2) {
    left: 100px;
  }

  #sort :nth-child(3) {
    left: 200px;
  }

  #sort :nth-child(4) {
    left: 300px;
  }

  #sort :nth-child(5) {
    left: 400px;
  }

  #sort :nth-child(6) {
    left: 500px;
  }

  #mmv {
    position: absolute;
    left: 40px;
    top: 110px;
    width: 1250px;
    height: 385px;
    color: rgb(255, 255, 255, 0.7);
    float: left;
    list-style: none;
    overflow-y: scroll;
    padding: 0;
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.3);
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgb(255, 255, 255, 0.7);
  }

  #mmv li {
    float: left;
    position: relative;
    width: 290px;
    height: 240px;
    margin: 0px 15px 0px 0px;
  }

  #mmv img {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 250px;
    height: 165px;
    object-fit: cover;
  }

  .num {
    position: absolute;
    left: 140px;
    top: 20px;
    z-index: 3;
  }

  .name {
    position: absolute;
    left: 15px;
    top: 185px;
    width: 200px;
    height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  .author {
    position: absolute;
    left: 15px;
    top: 212px;
    font-size: 14px;
  }

  .active {
    color: #409eff;
  }

  #page {
    position: absolute;
    left: 320px;
    top: 485px;
  }

</style>
